from dash import html, dcc
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd
import numpy as np


import datetime

from modules.bigscreen.callback2 import register_callbacks as register_equipment_callbacks
from server import server
from modules.bigscreen.charts import *
# from modules.bigscreen.charts import create_org_equipment_amount_chart


from .charts import *
# from .charts2 import *
from .charts3 import *
from .panelparts import *
from .modals import *


# 创建左侧面板
def create_left_panel():
    
    return html.Div([
        html.Div(
            create_org_equipment_amount_panel(),
            style={
                "marginBottom": "10px"
            }
        ),
        create_maintain_inspection_panel(),
    ], style={
        "width": "30%",
        "height": "100%",
        "backgroundColor": "#112360",
        "display": "flex",
        "flexDirection": "column",
        "minWidth": "0",
        "minHeight": "0",
        "padding": "5px 0 0 0",
        "margin": "0"
    })

# 创建中间地图面板
def create_middle_panel():
    return html.Div([
        html.Div([  # 标题和下拉框容器
             html.A(
                "一级医院：11家",
                href="/dash/equipment",
                id="title-org-count",
                target="_blank",
                style={
                    "cursor": "pointer",
                    "color": "#fff",
                    "fontSize": "16px",
                    "fontWeight": "bold",
                    "marginLeft": "10px",
                    "marginRight": "160px"
                }
            ),
            html.Div([ 
                dcc.Store(id='dummy-redirect-output'),
                
                 # 下拉框容器
                dcc.Dropdown(
                    id='filter-equipment-category',
                    options=[{'label': '全部分类', 'value': None}],
                    placeholder='设备分类',
                    style={'width': '150px', 'display': 'inline-block', 'marginRight': '10px'}
                ),
                dcc.Dropdown(
                    id='filter-price-range',
                    options=[
                        {'label': '全部区间', 'value': None},
                        {'label': '0-1万', 'value': '0-1万'},
                        {'label': '1-5万', 'value': '1-5万'},
                        {'label': '5-10万', 'value': '5-10万'},
                        {'label': '10-50万', 'value': '10-50万'},
                        {'label': '50-100万', 'value': '50-100万'},
                        {'label': '100万以上', 'value': '100万以上'}
                    ],
                    placeholder='价格区间',
                    style={'width': '150px', 'display': 'inline-block'}
                )
            ])
        ], style={
            'display': 'flex',
            'alignItems': 'center',
            'padding': '5px 5px',
            'zIndex': 10
        }),
        
        html.Div([  # 地图容器
            html.Div([  # 相对定位容器
                html.Img(
                    id='map-background',
                    style={
                        "width": "200%",
                        "height": "200%",
                        "objectFit": "contain",
                        "position": "absolute",
                        "top": "0",
                        "left": "0",
                        "zIndex": -1
                    }
                ),
                html.Img(
                    id='map-image',
                    src='/static/map/maphuangpu.png',
                    style={
                        "width": "100%",
                        "height": "100%",
                        "objectFit": "contain",
                        "position": "absolute",
                        "top": "0",
                        "left": "0",
                        "opacity": "0.9"
                    }
                ),
                
                html.Div(
                    id='map-overlay',
                    style={
                        "position": "absolute", 
                        "top": 0, 
                        "left": 0, 
                        "width": "100%", 
                        "height": "100%", 
                        "pointerEvents": "auto"
                    }
                )
            ], style={
                "position": "relative", 
                "width": "95%", 
                "height": "100%",
                "background": "#112360",
                "margin": "0 auto",
                "overflow": "hidden"
            })
        ], style={"padding": "0", "height": "calc(100% - 40px)"})  # 减去标题栏高度
    ], style={
        "width": "40%",
        "height": "100%",
        "background": "#112360",
        "display": "flex",
        "flexDirection": "column",
        "minWidth": "0",
        "minHeight": "0",
        "padding": "0",
        "margin": "0"
    })

# 创建右侧面板
def create_right_panel():
    return html.Div([
        html.Div(
            create_evnet_area_panel(),
            style={
                "height": "30%",  # 适当降低事件监控区域高度
                "marginBottom": "3px",  # 减小与功能区的间距
                "overflow": "hidden"
            }
        ),
        html.Div(
            create_function_area_panel(),
            style={
                "height": "25%",  # 适当降低功能区高度
                "marginBottom": "3px",  # 减小与维修次数统计的间距
                "overflow": "hidden"
            }
        ),
        html.Div(
            create_repair_count_panel(),
            style={
                "height": "calc(45% - 6px)",  # 增加维修次数统计区域高度
                "overflow": "hidden"
            }
        )
    ], style={
        "width": "30%",
        "height": "100%",
        "background": "#112360",
        "display": "flex",
        "flexDirection": "column",
        "minWidth": "0",
        "minHeight": "0",
        "padding": "0",
        "margin": "0"
    })

# 创建下方横条
def create_bottom_bar():
    return html.Div([
        html.Span('', style={'width':'50px','margin-right': '280px','color': 'white', 'font-size': '22px', 'vertical-align': 'middle'}),
        html.A([
            html.Img(src='assets/icon/累计维修.png', style={'height': '50px', 'margin-right': '8px', 'vertical-align': 'middle', 'position': 'relative'}),
        ], href='/dash/repair', target='_blank', style={'position': 'relative', 'display': 'inline-block', 'margin-right': '10px'}),
        html.Span('累计维修量：', style={'color': 'white', 'font-size': '14px', 'vertical-align': 'middle', 'margin-right': '10px'}),
        html.Span(id='repair-count-display', style={'color': 'white', 'font-size': '22px', 'vertical-align': 'middle', 'margin-right': '200px'}),
        html.A([
            html.Img(src='assets/icon/维修中数量.png', style={'height': '50px', 'margin-right': '8px', 'vertical-align': 'middle', 'position': 'relative'}),
        ], href='/dash/repair', target='_blank', style={'position': 'relative', 'display': 'inline-block', 'margin-right': '10px'}),
        html.Span('维修中数量：', style={'color': 'white', 'font-size': '14px', 'vertical-align': 'middle', 'margin-right': '10px'}),
        html.Span(id='repairing-count-display', style={'color': 'white', 'font-size': '22px', 'vertical-align': 'middle', 'margin-right': '200px'}),
        html.A([
            html.Img(src='assets/icon/返修率.png', style={'height': '50px', 'margin-right': '8px', 'vertical-align': 'middle', 'position': 'relative'}),
        ], href='/dash/repair', target='_blank', style={'position': 'relative', 'display': 'inline-block', 'margin-right': '10px'}),
        html.Span('返修率：', style={'color': 'white', 'font-size': '14px', 'vertical-align': 'middle', 'margin-right': '10px'}),
        html.Span(id='repair-rate-display', style={'color': 'white', 'font-size': '22px', 'vertical-align': 'middle', 'margin-right': '200px'}),
        html.A([
            html.Img(src='assets/icon/设备年限指数.png', style={'height': '50px', 'margin-right': '8px', 'vertical-align': 'middle', 'position': 'relative'}),
        ], href='/dash/repair', target='_blank', style={'position': 'relative', 'display': 'inline-block', 'margin-right': '10px'}),
        html.Span('设备年限指数：', style={'color': 'white', 'font-size': '14px', 'vertical-align': 'middle','margin-right': '10px'}),
        html.Span(id='avg-age-index-display', style={'color': 'white', 'font-size': '22px', 'vertical-align': 'middle','margin-right': '180px'}),
        
    ], style={
        "height": "60px",  # 进一步降低底部横条高度
        "background": "#112360",
        "display": "flex",
        "alignItems": "center",
        "padding": "0 10px",
        "position": "relative",
        "top": "0px",
        "zIndex": 20
    })

# 大屏布局
layout = html.Div([
    #支持点地图圆圈链接
    dcc.Store(id='dummy-redirect-output'),
    create_header_with_clock_panel(),
    
    # 其他组件
    html.Div([  # 主内容区域
        create_left_panel(),
        create_middle_panel(),
        create_right_panel(),
    ], style={
        "display": "flex",
        "flexDirection": "row",
        "height": "calc(100vh - 150px)",  # 减去顶部90px和底部60px
        "width": "100%",
        "margin": "0",
        "backgroundColor": "#112360",
        "padding": "0"
    }),
    create_bottom_bar()
], style={
    "backgroundColor": "#112360",
    "height": "calc(100vh - 90px)",
    "width": "100%",
    "margin": "0",
    "padding": "0",
    "overflow": "hidden"
})